<template>
    <div class="todo">
        <div class="todo-title">你今天完成了吗</div>
        <div class="todo-container">
            <div class="todo-input">
                <el-input v-model="todoValue" placeholder="请输入待办事项" />
                <el-button type="primary" @click="hdlAdd">添加</el-button>
            </div>
            <el-dialog v-model="dialogVisible" width="700" title="编辑菜单">
                <el-form ref="formEl" :label-width="100">
                    <el-form-item label="菜单名称" prop="name">
                        <ElInput v-model="form.todoEditData" style="width: 500px;" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <ElButton @click="dialogVisible = false" :loading="isLoading">取消</ElButton>
                    <ElButton @click="hdlSubmit" :loading="isLoading">确定</ElButton>
                </template>
            </el-dialog>
            <div class="todo-list" v-loading="isLoading">
                <ElTable :data="todoList" border style="width: 100%">
                    <ElTableColumn type="index" label="编号" align="center" />
                    <ElTableColumn prop="todoData" label="待办事项" align="center" />
                    <ElTableColumn label="操作" align="center">
                        <template #default="scope">
                            <ElButton @click="hdlEdit(scope.$index, scope.row)">编辑</ElButton>
                            <ElButton type="primary" @click="hdlFinish(scope.$index)">完成</ElButton>
                        </template>
                    </ElTableColumn>
                </ElTable>
            </div>
            <div class="todo-btn">
                <el-button type="primary" size="large" @click="hdlLogout">退出登录</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { useUserStore } from '@/stores/login';
import { useTodoStore } from '@/stores/todo';
const userStore = useUserStore();
const todoStore = useTodoStore();
// 弹窗显示标志
const dialogVisible = ref(false);
// 加载标志
const isLoading = ref(false);
// 记录当前编辑项的索引
const editId = ref(-1);

const todoValue = ref<string>('');
// 动态更新 todoList 数组
const todoList = computed(() => todoStore.todos);
const form = reactive({
    todoEditData: '',
});



function hdlLogout() {
    ElMessage.success('退出登录成功')
    localStorage.removeItem('userData')
    userStore.userData.username = ''
    userStore.userData.password = ''
    router.push('/login')
}


// 此时传进来的scope.$index是当前行的数组索引（编号-1），scope.row是当前行的数组对象
function hdlEdit(index: number, value: { todoData: string }) {
    dialogVisible.value = true;
    form.todoEditData = value.todoData;
    editId.value = index;
    // console.log(editId.value);
}

function hdlFinish(index: number) {
    isLoading.value = true;
    todoList.value.splice(index, 1);
    ElMessage.success('已完成一项待办事项，加油！！！');
    isLoading.value = false;
}

function hdlAdd() {
    if (todoValue.value.trim()) {
        const newTodo = { todoData: todoValue.value };
        // 将输入框的值添加到 todoList 数组中
        todoStore.addTodo(newTodo);
        ElMessage.success('添加成功');
        // 清空输入框
        todoValue.value = '';
    } else {
        ElMessage.error('请输入待办事项');
    }

    console.log(todoList.value);
}

function hdlSubmit() {
    isLoading.value = true;
    if (editId.value !== -1) {
        todoStore.editTodo(editId.value, form.todoEditData);
        dialogVisible.value = false;
        form.todoEditData = '';
        editId.value = -1;
        ElMessage.success('修改成功');
    }
    isLoading.value = false;
}
</script>

<style scoped lang="scss">
.todo {
    // background-color: skyblue;
    height: 98vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;

    .todo-title {
        font-size: 40px;
        margin-top: 20px;
        // background-color: rgb(238, 48, 222);
    }

    .todo-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: center;
        // background-color: red;
        width: 60%;
        height: 80%;
        margin-top: 20px;


        .todo-input {
            display: flex;
            margin-top: 20px;

            .el-input {
                width: 500px;
            }

            .el-button {
                margin-left: 20px;
            }
        }

        .todo-list {
            display: flex;
            // border: 1px solid black;
            width: 80%;
            height: 80%;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
        }

        .todo-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;

            .el-button {
                width: 200px;
            }
        }
    }
}
</style>